/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text,
} from "customize-easy-ui-component";
import {useMedia} from "use-media";
import {DirectLink} from "../../routing/Link";
import Img_Seal from "../../images/seal.png";
import {AttentionPoint} from "../common/rarelyVary";


/**报告封面的头部区域：最简化; 没有二维码；
 * CSS的或者逻辑做法的  "@media (min-width:690px),print and (min-width:538px)": { marginRight: "1rem" }
 * */
export const ReportFirstPageHeadSimpNQR= ({theme , rep, mbbm } :{theme: any, rep:any, mbbm:string}
) => {
  const atPrint = useMedia('print');
  return <React.Fragment>
    <div css={{
      textAlign: "center",
      "& > div": {
        margin: theme.spaces.sm,
      },
      display: "flex",
      justifyContent: "space-between",
      flexWrap: 'wrap',
    }}
    >
      <div css={{overflow: 'hidden'}}>
      </div>
      <div>
        <Text variant="h6">{mbbm}</Text>
        {atPrint &&  <><br/><br/></> }
        <Text variant="h6" css={{
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}
        >报告编号：{rep?.isp?.no}
        </Text>
      </div>
    </div>
  </React.Fragment>;
};

export const 注意事项评估= ( {comply, rep, tline} :{comply: any, rep: any, tline: any}
) => {
  const atPrint = useMedia('print');
  return <React.Fragment>
    <div css={{
      "@media print": {
        //【特殊】布局流如何定位到中间某一张纸张的末尾打印；纸张高度上 剪掉 上面的一行 “目录” 并没有被本div所都囊括的元素高度：推定剪掉高度是2rem。A4纸张竖版大约可接受高度大小=775pt再换算=273.4mm；A4纸297mm-2*(11.7=边距+页眉页脚)；
        //【有问题】目标div必须小于一张纸高度？这里若稍微超出了当前定位纸张区域，@@就可能被切分两页的！！，变成后续尾随空白页面的。所以尽量考虑有余量“- 10pt”:A4纸张竖版。
        height: `calc(100vh - 2rem - 10pt)`,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',   //'flex-end', 吸附本页纸张的底部区域打印，还是在本张纸张中间打印的？
        margin: '0 3rem 0',
      },
    }}>
      <Text variant={atPrint? "h3":'h5'} css={{ textAlign: 'center',
        "@media print": {
          marginBottom: '3rem',
        },
      }}>注意事项</Text>
      <Text variant="h5" css={{ lineHeight: 0.95,
            "@media print": {
              lineHeight: 2.3,
            },
        }}>
        1．本报告{comply}。<br/>
        2．本报告应当由计算机打印输出，修改无效。<br/>
        3．本报告结论页必须有评估、审核、批准人员的签字和评估机构检验专用章或 公章。<br/>
        4．本报告一式三份，由评估机构、委托单位、使用单位分别保存。<br/>
        5．委托单位对本报告结论如有异议，请在收到报告书之日起15日内，向评估机构提出书面意见。<br/>
        6．有关检测数据未经允许，委托单位、维保单位不得擅自向社会发布信息。<br/>
        7．{tline}<br/>
        8．报检电话：{rep?.isp?.ispu?.agency?.bjtel}，网址：{rep?.isp?.ispu?.agency?.bjurl}。
      </Text>
    </div>
  </React.Fragment>;
};
export const 注意事项WalkSa= ({comply, rep} :{comply: any, rep: any}
) => {
  return <AttentionPoint rep={rep} comply={comply} telurl>
    2．本报告应当由计算机打印输出，或者用钢笔、签字笔填写，字迹要工整，涂改无效。<br/>
    3．本报告结论页无评估、审核、批准人员的签字和评估机构检验专用章或公章无效。<br/>
    4．本报告一式三份，由评估机构、委托单位、维保单位分别保存。<br/>
    5．委托单位对本报告结论如有异议，请在收到报告书之日起15日内，向评估机构提出书面意见。<br/>
    6．本报告仅对评估时设备的状况负责。<br/>
    7．未经评估机构书面批准，不得部分复制本报告（全文复制除外）。<br/>
    8．
  </AttentionPoint>;
};

export const 检验编制核准Eval= ({ orc,rep } : { orc: any, rep:any }
) => {
  return <Table fixed={ ["8%","%","9%","10%","10%","7%","10%"]  }
                css={ {borderCollapse: 'collapse' } }  tight  miniw={800}>
    <TableBody>
      <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion`}>
        <TableRow>
          <CCell>评估人员</CCell>
          <CCell>{orc.检验人IDs}</CCell>
          <CCell>日期</CCell>
          <CCell>{orc.编制日期}</CCell>
          <CCell  rowSpan={3} colSpan={3}>
            <div css={{
              height:'7.5rem',
              '::before': {
                filter: 'opacity(30%)',
                width: '100%',
                height: '100%',
                backgroundImage: `url(${Img_Seal})`,
                content: '" "',
                position: 'absolute',
                top: 0,
                left: 0,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
              }
            }}>
              <Table  fixed={ ["40%","%"]  }
                      css={ {borderCollapse: 'collapse',height:'fill-available'} } tight  miniw={800}>
                <TableBody>
                  <TableRow>
                    <CCell css={{border:'none'}}>机构核准证号：</CCell>
                    <CCell css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</CCell>
                  </TableRow>
                  <TableRow>
                    <CCell css={{border:'none'}} colSpan={2}>（检验机构公章或者检验专用章）</CCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </CCell>
        </TableRow>
        <TableRow >
          <CCell component="th" scope="row">审 核</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
        <TableRow >
          <CCell component="th" scope="row">批 准</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
      </DirectLink>
    </TableBody>
  </Table>;
};
export const 检验编制核准EvalS= ({ orc,rep } : { orc: any, rep:any }
) => {
  return <Table fixed={  ["8.1%","%","4.2%","10.4%","30%"] }
                        css={ {borderCollapse: 'collapse' } }  tight  miniw={800}>
    <TableBody>
      <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Conclusion`}>
        <TableRow>
          <CCell>评估人员</CCell>
          <CCell>{orc.检验人IDs}</CCell>
          <CCell>日期</CCell>
          <CCell>{orc.编制日期}</CCell>
          <CCell  rowSpan={3}>
            <div css={{
              height:'7.5rem',
              '::before': {
                filter: 'opacity(30%)',
                width: '100%',
                height: '100%',
                backgroundImage: `url(${Img_Seal})`,
                content: '" "',
                position: 'absolute',
                top: 0,
                left: 0,
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
              }
            }}>
              <Table  fixed={ ["40%","%"]  }
                      css={ {borderCollapse: 'collapse',height:'fill-available'} } tight  miniw={800}>
                <TableBody>
                  <TableRow>
                    <CCell css={{border:'none'}}>机构核准证号：</CCell>
                    <CCell css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</CCell>
                  </TableRow>
                  <TableRow>
                    <CCell css={{border:'none'}} colSpan={2}>（评估机构公章或检验专用章）</CCell>
                  </TableRow>
                  <TableRow>
                    <CCell css={{border:'none'}}>签发日期：</CCell>
                    <CCell css={{border:'none'}}>2024-12-23</CCell>
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </CCell>
        </TableRow>
        <TableRow >
          <CCell>审 核</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell>2024-02-23</CCell>
        </TableRow>
        <TableRow >
          <CCell>批 准</CCell>
          <CCell></CCell>
          <CCell>日期</CCell>
          <CCell></CCell>
        </TableRow>
      </DirectLink>
    </TableBody>
  </Table>;
};
